<template>
	<div class="page-wrap">
		<bread :curPath="{ toPath: '/contact', name: '联系我们' }" />
		<div class="page-main">
			<div class="con-box">
				<div class="main-menu-box">
					<h2>
						<i class="yicon"></i>联系我们
					</h2>
					<ul class="main-menu shadow-box">
						<!-- <li class="active"><a href="/about">公司简介</a></li>
						<li><a href="/about/honor">企业荣誉</a></li>-->
					</ul>
				</div>
				<div class="main shadow-box">
					<h1>
						<span>联系我们</span>
					</h1>
					<div class="main-content">
						<!--地图和联系地址信息-->
						<div class="map-box">
							<div ref="map" class="map"></div>
							<div class="contact-page">
								<h2>联系我们</h2>工作时间：周一至周五8:30-17:00
								<br />热线电话：{{ companyInfo.tel }}
								<!-- <br />传 真：+ 86 0512-62550267 -->
								<br />邮件地址：{{ companyInfo.email }}
								<br />公司地址：{{ companyInfo.address }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
/* eslint-disable */
import { Bread } from './layout'
import { mapState } from 'vuex'

export default {
	mounted() {
		this.loadMap()
  },
  computed: {
    ...mapState(['companyInfo'])
  },
	methods: {
		loadMap() {
			var map = new BMap.Map(this.$refs.map)
			var point = new BMap.Point(121.496398, 31.24412)
			map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
			map.addControl(new BMap.NavigationControl())
			map.addControl(new BMap.MapTypeControl()) // 添加地图类型控件
			map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

			var marker = new BMap.Marker(point) // 创建标注
			map.addOverlay(marker)

			var opts = {
				width: 200, // 信息窗口宽度
				height: 100, // 信息窗口高度
				title: '苏州润勒克五金工具有限公司', // 信息窗口标题
				enableMessage: false, // 设置允许信息窗发送短信
				message: '江苏苏州工业园港田路99号港田工业坊17幢二楼单元'
			}

			var infoWindow = new BMap.InfoWindow(
				'地址：江苏苏州工业园港田路99号港田工业坊17幢二楼单元',
				opts
			) // 创建信息窗口对象
			marker.addEventListener('click', function() {
				map.openInfoWindow(infoWindow, point) // 开启信息窗口
			})
			map.openInfoWindow(infoWindow, point) // 开启信息窗口
		}
	},
	components: {
		Bread
	}
}
</script>

<style lang="scss" scoped>
/*地图和联系地址信息*/
.map {
	float: left;
	width: 60%;
	height: 400px;
}
.contact-page {
	float: left;
	width: 40%;
	padding: 0 30px 30px;
	line-height: 30px;
	font-size: 14px;
}
.contact-page > h2 {
	color: #006835;
	font-size: 24px;
	padding-bottom: 15px;
}
</style>
